<template>
  <div class="dictionary">
    <div class="type-list flex bsb ova">
      <div class="type tac bsb" :class="{active: active === item.id}" v-for="item in types" :key="item.id"
           @click="active = item.id">{{item.name}}
      </div>
      <div class="type tac bsb"></div>
    </div>
    <div class="input por tac">
      <div class="inner mlr-auto bsb tal" @click="toRes">
        <span>请输入要查询的文本</span>
        <van-icon name="search" class="fr"></van-icon>
      </div>
      <img class="books" src="../../images/dictionary/img_shugui.png">
    </div>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex';

  export default {
    name: "Dictionary",
    data() {
      return {
        types: [
          {name: '小学生字典', id: 7},
          {name: '现代汉语词典', id: 4},
          {name: '中华成语词典', id: 6},
          {name: '汉英大词典', id: 1},
          {name: '英汉大词典', id: 2},
        ],
        active: 0,
      }
    },
    computed: {
      ...mapGetters([
        'xToken'
      ])
    },
    methods: {
      ...mapMutations([
        'setXToken'
      ]),
      toRes() {
        this.$router.push({
          name: 'DicResults',
          params: {
            type: this.active
          }
        });
      },
      // 获取x-token
      getToken() {
        // return;
        if (!this.xToken.access_token) {
          this.http.$post('php/api/index/login', {id: 2}).then(res => {
            console.log(res);
            this.setXToken(res);
          }).catch(console.log);
        }
      }
    },
    created() {
      this.active = this.types[0].id;
      this.getToken();
    },
  }
</script>

<style scoped lang="less">
  .dictionary {
    min-height: 100vh;
    background-color: #eef0f4;
  }

  .type-list {
    padding: 1rem .63rem;
    width: 23.44rem;
    height: 5.63rem;
    background-color: #2167f3;
  }

  .type {
    flex: 1 0 auto;
    padding: .6rem;
    width: 4.75rem;
    height: 3.44rem;
    background-color: #0d50d4;
    border-radius: .38rem;
    font-size: .88rem;
    line-height: 1.13rem;
    color: rgba(255, 255, 255, .7);
    margin-right: .75rem;
    &.active {
      background-color: #fff;
      color: #333e53;
    }
    &:last-child {
      padding: 0;
      opacity: 0;
      width: 0.01rem;
    }
  }

  .input {
    margin-top: -.44rem;
    padding-top: 10rem;
    background-color: #eef0f4;
    border-radius: .38rem .38rem 0 0;
    .inner {
      padding: 0 1.03rem;
      width: 17.97rem;
      height: 3rem;
      background-color: #fff;
      box-shadow: 0 .13rem .44rem 0 rgba(159, 166, 187, 0.2);
      border-radius: 1.5rem;
      font-size: .88rem;
      line-height: 3rem;
      color: #b5b5b5;
      .van-icon {
        line-height: 3rem;
        font-size: 1.25rem;
      }
    }
    .books {
      margin-top: 11.22rem;
      width: 6.5rem;
    }
  }
</style>
